<template>
	<div class="chat-msg-item" :data-msg-id="msgInfo.id">
		<!-- 系统提示消息 -->
		<div class="system-message" 
			v-if="msgInfo.type === $enums.MESSAGE_TYPE.RECALL || 
			msgInfo.type === $enums.MESSAGE_TYPE.TIP_TEXT ||
			msgInfo.type === $enums.MESSAGE_TYPE.TIP_TIME">
			<div class="system-message-content" :class="messageClass">
				<!-- 不同类型的图标 -->
				<i class="el-icon-info" v-if="msgInfo.type === $enums.MESSAGE_TYPE.TIP_TEXT"></i>
				<i class="el-icon-time" v-if="msgInfo.type === $enums.MESSAGE_TYPE.TIP_TIME"></i>
				<i class="el-icon-refresh-left" v-if="msgInfo.type === $enums.MESSAGE_TYPE.RECALL"></i>
				
				<!-- 消息内容 -->
				<span v-if="msgInfo.type === $enums.MESSAGE_TYPE.TIP_TIME">
					{{ $date.toTimeText(msgInfo.sendTime) }}
				</span>
				<span v-else>{{ msgInfo.content }}</span>
			</div>
		</div>
		
		<div class="chat-msg-normal" v-if="isNormal" :class="{ 'chat-msg-mine': mine }">
			<div class="head-image">
				<head-image :name="showName" :size="40" :url="headImage" :id="msgInfo.sendId+''"></head-image>
			</div>
			<div class="chat-msg-content">
				<div v-show="mode == 1 && msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
					<span>{{ showName }}</span>
				</div>
				<div v-show="mode == 2" class="chat-msg-top">
					<span>{{ showName }}</span>
					<span>{{ $date.toTimeText(msgInfo.sendTime) }}</span>
				</div>
				<div class="chat-msg-bottom" @contextmenu.prevent="showRightMenu($event)">
					<div class="chat-msg-wrapper" ref="chatMsgBox">
						<span class="chat-msg-text" v-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT"
							v-html="$emo.transform(msgInfo.content)"></span>
						<div class="chat-msg-image" v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE">
							<div class="img-load-box" v-loading="loading" element-loading-text="上传中.."
								element-loading-background="rgba(0, 0, 0, 0.4)">
								<img class="send-image" :src="JSON.parse(msgInfo.content).thumbUrl"
									@click="showFullImageBox()" loading="lazy" />
							</div>
							<span title="发送失败" v-show="loadFail" @click="onSendFail"
								class="send-fail el-icon-warning"></span>
						</div>
						<div class="chat-msg-file" v-if="msgInfo.type == $enums.MESSAGE_TYPE.FILE">
							<div class="chat-file-box" v-loading="loading">
								<div class="chat-file-info">
									<el-link class="chat-file-name" :underline="true" target="_blank" type="primary"
										:href="data.url"  :download="data.name">{{ data.name }}</el-link>
									<div class="chat-file-size">{{ fileSize }}</div>
								</div>
								<div class="chat-file-icon">
									<img class="send-image" style="width: 65px;height: 65px;" element-loading-background="rgba(0, 0, 0, 0.4)" :src="getIconUrl(data.url)" />

								</div>
							</div>
							<span title="发送失败" v-show="loadFail" @click="onSendFail"
								class="send-fail el-icon-warning"></span>
						</div>
					</div>
					<div v-if="msgInfo.privateMessage" class="quote-message" @click="scrollToQuote(msgInfo.privateMessage)">
						<div class="quote-content">
							<template v-if="msgInfo.privateMessage.type === $enums.MESSAGE_TYPE.TEXT">
								<span class="quote-sender">{{ msgInfo.privateMessage.sendNickName }}：</span>
								<span class="quote-text">{{ msgInfo.privateMessage.content }}</span>
							</template>
							
							<template v-if="msgInfo.privateMessage.type === $enums.MESSAGE_TYPE.IMAGE">
								<span class="quote-sender">{{ msgInfo.privateMessage.sendNickName }}：</span>
								<span class="quote-type">[图片]</span>
								<img class="quote-image" :src="JSON.parse(msgInfo.privateMessage.content).thumbUrl">
							</template>
							
							<template v-if="msgInfo.privateMessage.type === $enums.MESSAGE_TYPE.FILE">
								<span class="quote-sender">{{ msgInfo.privateMessage.sendNickName }}：</span>
								<span class="quote-type">
									<i class="el-icon-document"></i>
									[文件] {{ JSON.parse(msgInfo.privateMessage.content).name }}
								</span>
							</template>
							
							<template v-if="msgInfo.privateMessage.type === $enums.MESSAGE_TYPE.AUDIO">
								<span class="quote-sender">{{ msgInfo.privateMessage.sendNickName }}：</span>
								<span class="quote-type">
									<i class="el-icon-microphone"></i>
									[语音消息]
								</span>
							</template>
						</div>
					</div>
					<div class="chat-msg-voice" v-if="msgInfo.type == $enums.MESSAGE_TYPE.AUDIO" @click="onPlayVoice()">
						<audio controls :src="JSON.parse(msgInfo.content).url"></audio>
					</div>
					<div class="chat-action chat-msg-text" v-if="isAction">
						<span v-if="msgInfo.type==$enums.MESSAGE_TYPE.ACT_RT_VOICE" title="重新呼叫" @click="$emit('call')"
							class="iconfont icon-chat-voice"></span>
						<span v-if="msgInfo.type==$enums.MESSAGE_TYPE.ACT_RT_VIDEO" title="重新呼叫" @click="$emit('call')"
							class="iconfont icon-chat-video"></span>
						<span>{{msgInfo.content}}</span>
					</div>
					<div class="chat-msg-status" v-if="!isAction">
						<span class="chat-readed" v-show="msgInfo.selfSend && !msgInfo.groupId
						&& msgInfo.status == $enums.MESSAGE_STATUS.READED">已读</span>
						<span class="chat-unread" v-show="msgInfo.selfSend && !msgInfo.groupId
						&& msgInfo.status != $enums.MESSAGE_STATUS.READED">未读</span>
					</div>
					<div class="chat-receipt" v-show="msgInfo.receipt" @click="onShowReadedBox">
						<span v-if="msgInfo.receiptOk" class="icon iconfont icon-ok" title="全体已读"></span>
						<span v-else>{{msgInfo.readedCount}}人已读</span>
					</div>
					<!-- 加引用 -->
					<view v-if="msgInfo.selfSend==true">
						<view style="background-color:#f4f4f5;border-radius: 3%; width:auto;">
							 <!-- 文字 -->
							 <view  class="text-ellipsis" v-if="msgInfo.privateMessage&&(msgInfo.privateMessage.type==$enums.MESSAGE_TYPE.TEXT)" style="width: auto;  height: auto;align-items: center;text-align: center;">
								 <u-alert  @click="positioningMsg"  type = "info" :description = "$emo.transform(content)"></u-alert>
							 </view>
							 	<!-- 图片消息 -->
							 <view v-if="msgInfo.privateMessage&&(msgInfo.privateMessage.type==$enums.MESSAGE_TYPE.IMAGE)">
							 	<view  @click="positioningMsg" style="width: 200px;  height: 90px;display: flex; align-items: center;text-align: center;">
							 	  <u-alert type = "info" style="width: 80px;" :description = "$emo.transform(content)"></u-alert>
							 	  <u--image :showLoading="true" :src="JSON.parse(msgInfo.privateMessage.content).thumbUrl" width="85px" height="85px"></u--image>
							 	</view>
							 </view>
							 <!-- 语音消息 -->
								<view  v-if="msgInfo.privateMessage&&(msgInfo.privateMessage.type==$enums.MESSAGE_TYPE.AUDIO)" @click="positioningMsg" style="display: flex; align-items: center;">
								  <u-alert  type = "info" :description = "$emo.transform(content)"></u-alert>
								  <view class="chat-msg-audio" @click="onPlayAudio()">
									<text class="iconfont icon-voice-play"></text>
									<text class="chat-audio-text">{{JSON.parse(msgInfo.content).duration+'"'}}</text>
									<text v-if="audioPlayState=='PAUSE'" class="iconfont icon-play"></text>
									<text v-if="audioPlayState=='PLAYING'" class="iconfont icon-pause"></text>
								  </view>
								</view>
							<!-- 视频或电话 -->
								<view v-if="msgInfo.privateMessage&&(msgInfo.privateMessage.type==$enums.MESSAGE_TYPE.ACT_RT_VOICE)" @click="positioningMsg" style="display: flex; align-items: center;text-align: center;">
								  <u-alert  type = "info" :description = "$emo.transform(content)"></u-alert>
									 <view class="chat-realtime"  @click="$emit('call')">
										<text class="iconfont icon-chat-voice"></text>
										<text>{{msgInfo.content}}</text>
									 </view>
								</view>
								<view  v-if="msgInfo.privateMessage&&(msgInfo.privateMessage.type==$enums.MESSAGE_TYPE.ACT_RT_VIDEO)" @click="positioningMsg" style="display: flex; align-items: center;text-align: center;">
								  <u-alert  type = "info" :description = "$emo.transform(content)"></u-alert>
									 <view class="chat-realtime"  @click="$emit('call')">
										<text class="iconfont icon-chat-video"></text>
										<text>{{msgInfo.content}}</text>
									 </view>
								</view>
								<!-- 文件 -->
								<view v-if="msgInfo.privateMessage&&(msgInfo.privateMessage.type==$enums.MESSAGE_TYPE.FILE)" @click="positioningMsg" style="display: flex; align-items: center;text-align: center;">
									  <u-alert  type = "info" :description = "$emo.transform(content)" style="width: 70px"></u-alert>
										<view class="chat-msg-file" >
											<view class="chat-file-box"  style="width: 150px;">
												<view class="chat-file-info" style="text-align: left;">
														<view  class="text-ellipsis">{{fileData.name}}</view>
													<view class="chat-file-size">{{fileData.fileSize}}</view>
												</view>
												<view class="chat-file-icon iconfont">
													<image :src="getIconUrl(fileData.url)" style="width: 65px;height: 65px;" mode="aspectFill"></image>
												</view>
											</view>
										</view>
								</view>
						</view>
					</view>
					<!-- 引用结束 -->
				</div>

				<!-- 引用  非本人发送 -->
				<view v-if="msgInfo.selfSend==false">
					<view style="background-color:#f4f4f5;border-radius: 3%; width:auto;">
						 <!-- 文字 -->
						 <view  class="text-ellipsis" v-if="msgInfo.privateMessage&&(msgInfo.privateMessage.type==$enums.MESSAGE_TYPE.TEXT)" style="width: auto;  height: auto;align-items: center;text-align: center;">
						 		<u-alert  @click="positioningMsg"  type = "info" :description = "$emo.transform(content)"></u-alert>
						 </view>
						 <!-- 图片消息 -->
						 <view v-if="msgInfo.privateMessage&&(msgInfo.privateMessage.type==$enums.MESSAGE_TYPE.IMAGE)">
						 	<view  @click="positioningMsg" style="width: 200px;  height: 90px;display: flex; align-items: center;text-align: center;">
						 	  <u-alert type = "info" style="width: 80px;" :description = "$emo.transform(content)"></u-alert>
						 	  <u--image :showLoading="true" :src="JSON.parse(msgInfo.privateMessage.content).thumbUrl" width="85px" height="85px"></u--image>
						 	</view>
						 </view>
						 <!-- 语音消息 -->
							<view  v-if="msgInfo.privateMessage&&(msgInfo.privateMessage.type==$enums.MESSAGE_TYPE.AUDIO)" @click="positioningMsg" style="display: flex; align-items: center;">
							  <u-alert  type = "info" :description = "$emo.transform(content)"></u-alert>
							  <view class="chat-msg-audio" @click="onPlayAudio()">
								<text class="iconfont icon-voice-play"></text>
								<text class="chat-audio-text">{{JSON.parse(msgInfo.content).duration+'"'}}</text>
								<text v-if="audioPlayState=='PAUSE'" class="iconfont icon-play"></text>
								<text v-if="audioPlayState=='PLAYING'" class="iconfont icon-pause"></text>
							  </view>
							</view>
						<!-- 视频或电话 -->
							<view v-if="msgInfo.privateMessage&&(msgInfo.privateMessage.type==$enums.MESSAGE_TYPE.ACT_RT_VOICE)" @click="positioningMsg" style="display: flex; align-items: center;text-align: center;">
							  <u-alert  type = "info" :description = "$emo.transform(content)"></u-alert>
								 <view class="chat-realtime"  @click="$emit('call')">
									<text class="iconfont icon-chat-voice"></text>
									<text>{{msgInfo.content}}</text>
								 </view>
							</view>
							<view  v-if="msgInfo.privateMessage&&(msgInfo.privateMessage.type==$enums.MESSAGE_TYPE.ACT_RT_VIDEO)" @click="positioningMsg" style="display: flex; align-items: center;text-align: center;">
							  <u-alert  type = "info" :description = "$emo.transform(content)"></u-alert>
								 <view class="chat-realtime"  @click="$emit('call')">
									<text class="iconfont icon-chat-video"></text>
									<text>{{msgInfo.content}}</text>
								 </view>
							</view>
							<!-- 文件 -->
							<view v-if="msgInfo.privateMessage&&(msgInfo.privateMessage.type==$enums.MESSAGE_TYPE.FILE)" @click="positioningMsg" style="display: flex; align-items: center;text-align: center;">
								  <u-alert  type = "info" :description = "$emo.transform(content)" style="width: 70px"></u-alert>
								  <view class="chat-msg-content" >
								  	<view class="chat-msg-bottom" >
								  		<view class="chat-msg-file" >
								  			<view class="chat-file-box"  style="width: 150px;">
								  				<view class="chat-file-info" style="text-align: right;">
								  						<view  class="text-ellipsis">{{fileData.name}}</view>
								  					<view class="chat-file-size">{{fileData.fileSize}}</view>
								  				</view>
								  				<view class="chat-file-icon iconfont">
								  					<image :src="getIconUrl(fileData.url)" style="width: 65px;height: 65px;" mode="aspectFill"></image>
								  				</view>
								  			</view>
								  		</view>
								  	</view>
								  </view>
							</view>
					</view>
				</view>	
				<!-- 引用结束 -->
			</div>
		</div>
		<right-menu v-show="menu && rightMenu.show" :pos="rightMenu.pos" :items="menuItems"
			@close="rightMenu.show = false" @select="onSelectMenu"></right-menu>
		<chat-group-readed ref="chatGroupReadedBox" :msgInfo="msgInfo" :groupMembers="groupMembers"></chat-group-readed>
		<forward-dialog 
			:visible.sync="showForwardDialog"
			:message="msgInfo"
			@close="showForwardDialog = false">
		</forward-dialog>
	</div>
</template>

<script>
	import HeadImage from "../common/HeadImage.vue";
	import RightMenu from '../common/RightMenu.vue';
	import ChatGroupReaded from './ChatGroupReaded.vue';
	import * as fileIcon from '@/utils/fileIcon.js';
	import ForwardDialog from './ForwardDialog.vue';
	export default {
		name: "messageItem",
		components: {
			HeadImage,
			RightMenu,
			ChatGroupReaded,
			ForwardDialog
		},
		props: {
			mode: {
				type: Number,
				default: 1
			},
			msgInfo: {
				type: Object,
				required: true
			},
			groupMembers: {
				type: Array
			},
			menu: {
				type: Boolean,
				default: true
			},
			isAdmin:{
				type:Boolean,
				default: false
			},
			groupInfo:{
				type: Boolean,
				default: false
			},
			tagId:{
				type:Number,
				required: true
			}
		},
		data() {
			return {
				audioPlayState: 'STOP',
				rightMenu: {
					show: false,
					pos: {
						x: 0,
						y: 0
					}
				},
				showForwardDialog: false
			}
		},
		methods: {
			positioningMsg(){
				if(this.tagId==""){
					return;
				}
				const target = document.getElementById('chat-item-'+(this.tagId-3));
					target.scrollIntoView({
						behavior: 'smooth'
					});
				//this.tagId="";
			},
			getIconUrl(url){
				let data=fileIcon.getUrl(url);
				return data;
			},
			onSendFail() {
				this.$message.error("该文件已发失败，目前不支持动重新发送，建议手动重新发送")
			},
			showFullImageBox() {
				let imageUrl = JSON.parse(this.msgInfo.content).originUrl;
				if (imageUrl) {
					this.$store.commit('showFullImageBox', imageUrl);
				}
			},
			onPlayVoice() {
				if (!this.audio) {
					this.audio = new Audio();
				}
				this.audio.src = JSON.parse(this.msgInfo.content).url;
				this.audio.play();
				this.onPlayVoice = 'RUNNING';
			},
			showRightMenu(e) {
				this.rightMenu.pos = {
					x: e.x,
					y: e.y
				};
				this.rightMenu.show = "true";
			},
			onSelectMenu(item) {
				if (item.key === 'FORWARD') {
					this.showForwardDialog = true
					return
				}
				this.$emit(item.key.toLowerCase(), this.msgInfo)
			},
			onShowReadedBox() {
				let rect = this.$refs.chatMsgBox.getBoundingClientRect();
				this.$refs.chatGroupReadedBox.open(rect);
			},
			scrollToQuote(quoteMessage) {
				const messageElements = document.querySelectorAll('.chat-msg-item');
				for (let i = 0; i < messageElements.length; i++) {
					if (messageElements[i].getAttribute('data-msg-id') === quoteMessage.id) {
						messageElements[i].scrollIntoView({ behavior: 'smooth', block: 'center' });
						messageElements[i].classList.add('highlight');
						setTimeout(() => {
							messageElements[i].classList.remove('highlight');
						}, 2000);
						break;
					}
				}
			},
			onRecallthisMessage(msgInfo) {
				this.$confirm('确认撤回此条消息?', '撤回消息', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let url = `/message/${this.chat.type.toLowerCase()}/recallAdmin/${msgInfo.id}`
					this.$http({
						url: url,
						method: 'DELETE'
					}).then(() => {
						this.$message.success("消息已撤回");
						msgInfo = JSON.parse(JSON.stringify(msgInfo));
						msgInfo.type = 10;
						msgInfo.content = '你撤回了一条消息';
						msgInfo.status = this.$enums.MESSAGE_STATUS.RECALL;
						this.$store.commit("insertMessage", msgInfo);
					}).catch((error) => {
						console.error('撤回消息失败:', error);
						this.$message.error("撤回失败");
					});
				}).catch(() => {
					// 用户取消操作
				});
			}
		},
		computed: {
			loading() {
				return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading";
			},
			loadFail() {
				return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail";
			},
			data() {
				return JSON.parse(this.msgInfo.content)
			},
			fileData() {
				let datas = JSON.parse(this.msgInfo.privateMessage.content);
				let size = datas.size;
				if (size > 1024 * 1024) {
					size = Math.round(size / 1024 / 1024) + "M";
				} else if (size > 1024) {
					size = Math.round(size / 1024) + "KB";
				} else {
					size + "B";
				}
				datas.fileSize = size;
				return datas;
			},
			content() {
				let name = this.msgInfo.privateMessage.sendNickName + " : ";
				if (this.msgInfo.privateMessage.type == 1 || this.msgInfo.privateMessage.type == 2) {
					console.log("测试")
				} else {
					name += this.msgInfo.privateMessage.content
				}
				return name
			},
			fileSize() {
				let size = this.data.size;
				if (size > 1024 * 1024) {
					return Math.round(size / 1024 / 1024) + "M";
				}
				if (size > 1024) {
					return Math.round(size / 1024) + "KB";
				}
				return size + "B";
			},
			menuItems() {
				let items = [];
				items.push({
					key: 'DELETE',
					name: '删除',
					icon: 'el-icon-delete'
				}, {
					key: 'COLLECT',
					name: '收藏',
					icon: 'el-icon-star-off',
				}, {
					key: 'FORWARD',
					name: '转发',
					icon: 'el-icon-position',
				}, {
					key: 'QUOTE',
					name: '引用',
					icon: 'el-icon-chat-line-round',
				});

				if (this.isAdmin && !this.msgInfo.selfSend) {
					items.push({
						key: 'RECALLTHIS',
						name: '撤回此条消息',
						icon: 'el-icon-refresh-left'
					});
				}

				if (this.msgInfo.selfSend && this.msgInfo.id > 0) {
					items.push({
						key: 'RECALL',
						name: '撤回',
						icon: 'el-icon-refresh-left'
					});
				}

				return items;
			},
			isAction() {
				return this.$msgType.isAction(this.msgInfo.type);
			},
			isNormal() {
				return this.msgInfo.type !== this.$enums.MESSAGE_TYPE.RECALL && 
					   this.msgInfo.type !== this.$enums.MESSAGE_TYPE.TIP_TEXT &&
					   this.msgInfo.type !== this.$enums.MESSAGE_TYPE.TIP_TIME;
			},
			mine() {
				return this.msgInfo.selfSend;
			},
			messageClass() {
				if (this.msgInfo.type === this.$enums.MESSAGE_TYPE.RECALL) {
					return 'recall';
				} else if (this.msgInfo.type === this.$enums.MESSAGE_TYPE.TIP_TIME) {
					return 'time';
				} else if (this.msgInfo.type === this.$enums.MESSAGE_TYPE.TIP_TEXT) {
					return 'tip';
				}
				return '';
			},
			headImage() {
				return this.msgInfo?.headImage || '';
			},
			showName() {
				return this.msgInfo?.sendNickName || this.msgInfo?.nickName || '';
			}
		}
	}
</script>

<style lang="scss">
.chat-msg-item {
  .chat-msg-normal {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 10px 10px;
    min-height: 50px;
    width: 100%;
    box-sizing: border-box;

    .head-image {
      position: relative;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
    }

    .chat-msg-content {
      margin-left: 8px;
      max-width: 65%;
      position: relative;

      .chat-msg-top {
        position: absolute;
        top: -20px;
        left: 0;
        font-size: 12px;
        color: #999;
        white-space: nowrap;
        z-index: 1;
      }

      .chat-msg-bottom {
        position: relative;
        
        .chat-msg-text {
          display: inline-block;
          position: relative;
          padding: 10px 15px;
          background-color: #fff;
          border: 1px solid #e6e6e6;
          border-radius: 10px;
          color: #333;
          font-size: 14px;
          line-height: 1.5;
          text-align: left;
          word-break: break-all;

          &:before {
            content: '';
            position: absolute;
            left: -12px;
            top: 14px;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right-color: #fff;
            z-index: 2;
          }

          &:after {
            content: '';
            position: absolute;
            left: -14px;
            top: 14px;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right-color: #e6e6e6;
            z-index: 1;
          }
        }

        .quote-message {
          margin-top: 8px;
          margin-bottom: 0;
          padding: 8px 12px;
          background: rgba(0, 0, 0, 0.03);
          border-radius: 4px;
          cursor: pointer;
          
          &:hover {
            background: rgba(0, 0, 0, 0.05);
          }
          
          .quote-content {
            font-size: 13px;
            color: #666;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            
            .quote-sender {
              color: #999;
              margin-right: 4px;
            }
            
            .quote-text {
              color: #666;
            }
            
            .quote-type {
              display: flex;
              align-items: center;
              color: #666;
              
              i {
                margin-right: 4px;
                font-size: 16px;
              }
            }
            
            .quote-image {
              width: 40px;
              height: 40px;
              object-fit: cover;
              margin-left: 8px;
              border-radius: 2px;
            }
          }
        }
      }
    }

    &.chat-msg-mine {
      flex-direction: row-reverse;

      .chat-msg-content {
        margin-left: 0;
        margin-right: 8px;
        text-align: right;

        .chat-msg-top {
          left: auto;
          right: 0;
          text-align: right;
        }

        .chat-msg-bottom {
          .chat-msg-text {
            background-color: #95EC69;
            border: none;

            &:before {
              left: auto;
              right: -12px;
              border: 8px solid transparent;
              border-right-color: transparent;
              border-left-color: #95EC69;
            }

            &:after {
              display: none;
            }
          }
        }
      }
    }
  }

  .chat-msg-image {
    max-width: 200px;
    border-radius: 4px;
    overflow: hidden;
    
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  .chat-msg-file {
    .chat-file-box {
      background: #f8f8f8;
      border-radius: 4px;
      padding: 10px;
    }
  }

  // 高亮动
  @keyframes highlight {
    0% { background-color: rgba(255, 241, 89, 0.3); }
    100% { background-color: transparent; }
  }

  &.highlight {
    animation: highlight 2s ease-out;
  }

  .system-message {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 15px;
    
    .system-message-content {
      display: inline-flex;
      align-items: center;
      padding: 6px 12px;
      background: rgba(144, 147, 153, 0.1);
      border-radius: 15px;
      max-width: 80%;
      
      i {
        margin-right: 6px;
        font-size: 14px;
        color: #909399;
      }
      
      span {
        font-size: 12px;
        color: #909399;
        line-height: 1.4;
      }

      // 不同类型的提示样式
      &.recall {
        background: rgba(245, 108, 108, 0.1);
        i, span { color: #F56C6C; }
      }

      &.time {
        background: rgba(144, 147, 153, 0.1);
        i, span { color: #909399; }
      }

      &.tip {
        background: rgba(64, 158, 255, 0.1);
        i, span { color: #409EFF; }
      }
    }
  }
}
</style>